<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
    <div class="filter-container" style="display: flex">
      <el-form ref="listQuery" :model="listQuery" status-icon label-position="right"
               label-width="100px" style="display: flex">
        <el-form-item label="子公司名称" prop="subID">
          <el-select v-model="listQuery.subID" placeholder="子公司名称" style="width:100%">
            <el-option
                 v-for="item in company"
                 :key="item.subID"
                 :label="item.subName"
                 :value="item.subID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始日期" prop="startTime">
          <el-date-picker
               v-model="listQuery.startTime"
               type="datetime"
               placeholder="查询开始日期"
               value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endTime">
          <el-date-picker
               v-model="listQuery.endTime"
               type="datetime"
               placeholder="查询结束日期"
               value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="请选择状态" prop="status">
          <el-select v-model="listQuery.status" placeholder="请选择状态">
            <el-option
                 v-for="item in options"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="margin-left: 30px">
        <el-button type="primary" @click="getInput" icon="el-icon-search">查询</el-button>
      </div>
    </div>
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#92D3FF',color:'#fff'}">
      <!--<el-table-column align="center" min-width="100" label="表单ID" prop="id"/>-->
      <el-table-column align="center" min-width="120" label="表单编号" prop="formNo"/>
      <el-table-column align="center" min-width="130" label="上传时间" prop="addTime"/>
      <el-table-column align="center" min-width="130" label="保险公司名称" prop="insuranceID"/>
      <el-table-column align="center" min-width="150" label="保代公司/权益公司" prop="insuragentID"/>
      <el-table-column align="center" min-width="130" label="保理公司名称" prop="factoringID"/>
      <el-table-column align="center" min-width="120" label="手续费总额" prop="amount"/>
      <el-table-column align="center" min-width="130" label="表单状态" prop="status">
        <template slot-scope="scope">
          <el-tag>{{{
                  "0":"表单已上传",
                  "1":"保代或权益公司垫资已申请",
                  "2":"保理公司已接收",
                  "3":"保理公司垫资已支付",
                  "4":"保险公司已回款",
                  "5":"保代公司已确认",
                  "6":"垫资利息已支付",
                  "7":"权益服务商已取款"
                  }[scope.row.status]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="170" label="保代/权益公司处理时间" prop="advanceTime"/>
      <el-table-column align="center" min-width="120" label="需要垫资保单数" prop="advanceCount"/>
      <el-table-column align="center" min-width="120" label="需要垫资金额" prop="advanceAmount"/>
      <el-table-column align="center" min-width="120" label="垫资支付时间" prop="advanceTime"/>
      <el-table-column align="center" min-width="120" label="回款总额" prop="repayAmount"/>
      <el-table-column align="center" min-width="120" label="回款时间" prop="repayTime"/>
      <el-table-column align="center" min-width="120" label="垫资手续费" prop="interest"/>
      <el-table-column align="center" min-width="120" label="上传备注" prop="remarkUp"/>
      <el-table-column align="center" min-width="130" label="垫资申请备注" prop="垫资申请备注"/>
    </el-table>
  </div>
</template>

<script>
  import {doGet, doPost} from '@/api'
  import {cities} from '@/utils/base'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  export default {
    name: 'bank',
    components: {Pagination},
    filters: {},
    data() {
    return {
      pickerOptions: {
          disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
          picker.$emit('pick', new Date());
      }
      }, {
        text: '昨天',
             onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24);
          picker.$emit('pick', date);
        }
      }, {
        text: '一周前',
             onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit('pick', date);
        }
      }]
      },
      //        状态
      options: [{
        value: '',
        label: '请选择状态'
      }, {
        value: '0',
        label: '表单已上传'
      }, {
        value: '1',
        label: '保代公司垫资已申请'
      }, {
        value: '2',
        label: '保理公司已接收'
      }, {
        value: '3',
        label: '保理公司垫资已支付'
      }, {
        value: '4',
        label: '保险公司已回款'
      }, {
        value: '5',
        label: '保代公司已确认'
      }, {
        value: '6',
        label: '垫资利息已支付'
      }, {
        value: '7',
        label: '权益服务商已取款'
      }],
       company: [],
       list: [],
       list1: [],
      dataList: [],
       total: 0,
       listLoading: true,
       listLoading1: true,
       listQuery: {
          startTime: undefined,
         endTime: undefined,
         subID: undefined,
         status: undefined,
       },
      editForm: {
        id: undefined,
             billNo: undefined,
             billAmount: undefined,
             fee: undefined,
             agentID: undefined,
             agentNo: undefined,
             formType: undefined,
      },
  }
  },
  created() {
    this.getList()
    doGet('userinfo.html', {}).then(response => {
      this.dataList = response.data
      const data = this.dataList
      this.getCompanyList(data)
    }).catch(() => {

    })
  },
  methods: {
    getCompanyList(data) {
      this.editForm2 = {
        companyType: data.companyType
      }
      doGet('insuragent.html?op=getSubListByCurrent', this.editForm2) .then(response => {
             this.company = response.rows
           })
           .catch(response => {
             this.company = []
           })
    },
    getList() {
      this.listLoading = true
      doGet('subagentfee.html?op=list', this.listQuery).then(response => {
        this.list = response.rows
        this.total = response.rows.length
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    getInput() {
      this.getList()
    },
  }
  }
</script>
